<template>
  <div class="LoginAccount">
    <el-form label-width="70px" :rules="rules" :model="user" ref="formRef">
      <el-form-item label="账号" prop="name">
        <el-input v-model="user.name" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="user.password" show-password />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import {rules }from '../config/account-rules'
import { ElForm } from "element-plus";
import LocalCache from "@/utils/cache"
import {useStore} from 'vuex'
export default defineComponent({
  name: "LoginAccount",
  setup() {
    const user = reactive({
      // ?? 为逻辑操作符，左边为 null 或者 undefined才返回右边
      name: LocalCache.getCache('name') ?? "",
      password: LocalCache.getCache('password') ?? "",
    });
    const store = useStore();

    //通过 ref 获取 form 表单里面的值的内容 ，指定类型为 InstanceType< typeof ElForm> 
    const formRef = ref<InstanceType<typeof ElForm>>();

      // 在这个函数里面书写逻辑，写登录
    const loginAction = (remember:boolean) => {
      formRef.value?.validate((valid) => {
        if(valid){
          // console.log("真正执行登录逻辑");
          if(remember){
            // 如果记住密码被勾选，就将密码计入到本地存储当中
            LocalCache.setCache('name',user.name)
            LocalCache.setCache('password',user.name)
          }else{
            // 如果没有被勾选，则清除缓存
            LocalCache.deleteCache('name')
             LocalCache.deleteCache('password')
          }
          
          store.dispatch('login/accountLoginAction',{...user})

          
        }
      });
    };

    return {
      user,
      rules,
      loginAction,
      formRef,
    };
  },
});
</script>

<style lang="less" scoped>
.LoginAccount {
  padding-top: 20px;
  .el-form-item {
    margin-bottom: 28px;
  }
}
</style>
